<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/我的分页/topbase.css">
    <script src="../../js/rem.js"></script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1432742_zjogt54a0il.css">
    <link rel="stylesheet" href="../../css/我的分页/优惠券.css">
    <script src="../../js/jquery-1.11.3.min.js"></script>
    <script src="http://at.alicdn.com/t/font_1432742_zjogt54a0il.js"></script>
    <script src="../../js/api.js"></script>
    <script>
        $.post(discount_list_Api,{id:1},data=>{
            console.log(data);
            let html = `
            <ul class="content">
                <li>
                    <div class="cot_l">
                        <span>￥<strong>30</strong></span>
                        <p>买指定商品可用</p>
                    </div>
                    <div class="cot_r">
                        <p class="cot_r_p">
                            新疆伊犁吊千小红杏专享,
                            减30元，券后包邮价88元
                            ，
                        </p>
                        <span class="cot_r_span">指定商品可用</span>
                        <div class="date">
                            2019.07.11 1 2:00:00-2019.08.3123:5
                        </div>
                    </div>
                </li>
                <li>
                    <div class="cot_l">
                        <span>￥<strong>30</strong></span>
                        <p>买指定商品可用</p>
                    </div>
                    <div class="cot_r">
                        <p class="cot_r_p">
                            新疆伊犁吊千小红杏专享,
                            减30元，券后包邮价88元
                            ，
                        </p>
                        <span class="cot_r_span">专场商品可用</span>
                        <div class="date">
                            2019.07.11 1 2:00:00-2019.08.3123:5
                        </div>
                        <div class="can">可用商品</div>
                    </div>
                </li>
                <li>
                    <div class="cot_l">
                        <span>￥<strong>30</strong></span>
                        <p>买指定商品可用</p>
                    </div>
                    <div class="cot_r">
                        <p class="cot_r_p">
                            新疆伊犁吊千小红杏专享,
                            减30元，券后包邮价88元
                            ，
                        </p>
                        <span class="cot_r_span">全场商品可用</span>
                        <div class="date">
                            2019.07.11 1 2:00:00-2019.08.3123:5
                        </div>
                    </div>
                </li>
            </ul>
            `
            if(1){//判断时间是否过期   当前已过期
                $('.show li').eq(2).append(html)
                $('.show>li').css('filter','grayscale(200%)')
            }
        })
    </script>
</head>

<body>
    <header>
        <a href="../我的易果.html">
            <div class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-1"></div>
        </a>
        
        <h1>我的优惠券</h1>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tishi"></use>
        </svg>
    </header>
    <ul class="btn">
        <li class="active">未使用</li>
        <li>已使用</li>
        <li>已过期</li>
    </ul>
    <ul class="show">
        <li class="bo">
            <!-- <ul class="content">
                <li>
                    <div class="cot_l">
                        <span>￥<strong>30</strong></span>
                        <p>买指定商品可用</p>
                    </div>
                    <div class="cot_r">
                        <p class="cot_r_p">
                            新疆伊犁吊千小红杏专享,
                            减30元，券后包邮价88元
                            ，
                        </p>
                        <span class="cot_r_span">指定商品可用</span>
                        <div class="date">
                            2019.07.11 1 2:00:00-2019.08.3123:5
                        </div>
                    </div>
                </li>
                <li>
                    <div class="cot_l">
                        <span>￥<strong>30</strong></span>
                        <p>买指定商品可用</p>
                    </div>
                    <div class="cot_r">
                        <p class="cot_r_p">
                            新疆伊犁吊千小红杏专享,
                            减30元，券后包邮价88元
                            ，
                        </p>
                        <span class="cot_r_span">专场商品可用</span>
                        <div class="date">
                            2019.07.11 1 2:00:00-2019.08.3123:5
                        </div>
                        <div class="can">可用商品</div>
                    </div>
                </li>
                <li>
                    <div class="cot_l">
                        <span>￥<strong>30</strong></span>
                        <p>买指定商品可用</p>
                    </div>
                    <div class="cot_r">
                        <p class="cot_r_p">
                            新疆伊犁吊千小红杏专享,
                            减30元，券后包邮价88元
                            ，
                        </p>
                        <span class="cot_r_span">全场商品可用</span>
                        <div class="date">
                            2019.07.11 1 2:00:00-2019.08.3123:5
                        </div>
                    </div>
                </li>
            </ul> -->
        </li>
        <li>
            <img style="position: absolute; left: 0;top:9rem;right: 0;bottom: 0;margin: auto;" src="../../image/none_youhui.png" alt="">
        </li>
        <li>

        </li>
    </ul>
    <script>
        let i = 0
        $(function () {
            $(".btn li").click(function () {
                i = $(this).index();
                $(this).addClass("active").siblings().removeClass('active')
                $(".show>li").eq(i).addClass("bo").siblings().removeClass('bo')
            })

            //判断优惠券是否过期


        })
    </script>
</body>

</html>